import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Button, Image } from '@tarojs/components';
import './index.scss'
import { queryFundPoolHistory } from '@/services/api/fund';
import { formatAmount, parseDateFromStr } from '@/utils/fomatter';
import { stringifyUrl } from 'query-string';

interface FundDetailHistoricalNetValueProps {
    className?: string;
    fundId: String;
}


class FundDetailHistoricalNetValue extends Component<FundDetailHistoricalNetValueProps, any> {

    config = {
        navigationBarTitleText: ''
    }

    state = {
        dataLsit: []
    }

    componentWillMount() {

    }
    componentDidMount() { }
    componentWillReceiveProps(nextProps, nextContext) {
        this.getFundNetHistory()
    }
    componentWillUnmount() { }

    /**
    * 请求产品历史净值
    * @returns 
    */
    getFundNetHistory() {
        if (this.props.fundId.length > 0) {
            queryFundPoolHistory(this.props.fundId,0).then((resp) => {
                this.setState({ dataLsit: resp.data })
            });
        }
    }

    getDayZdf(item){
        if(Number(item['preTotalNet']) === 0){
            return "0.00%"
        }
        return  ((Number(item['totalNet']) - Number(item['preTotalNet']))  / Number(item['preTotalNet']) *100).toFixed(2) + '%'
    }

    gotoHistoricalNetValue(){
        if (this.props.fundId.length > 0) {
            var fundId = this.props.fundId
            var map  = { 'fundId': fundId }
            Taro.navigateTo({ url: stringifyUrl({ url: '/preIpoFund/historicalNetValue/index', query: map }, { encode: false }) })
        }
    }

    render() {
        const { className } = this.props
        const { dataLsit } = this.state
        var tempDataList : any[] = []

        for (let index = 0; index < Math.min(5,dataLsit.length); index++) {
            const element = dataLsit[index];
            tempDataList.push(element)
        }
        return (
            <View className={`fund-detail-historical-net-value  ${className}`}>
                <View className='table-header' >
                    <Text className='header-item col-3'>日期</Text>
                    <Text className='header-item col-2 text-right'>单位净值</Text>
                    <Text className='header-item col-2 text-right'>累计净值</Text>
                    <Text className='header-item col-2 text-right'>日涨幅</Text>
                </View>
                <View className='table-content'>
                    {
                        tempDataList.map((item, index) => {
                            return <View className='table-content-item'>
                                <Text className='table-content-item-item'>{parseDateFromStr(item['initDate'])}</Text>
                                <Text className='table-content-item-item'>{item['unitNet'] ? Number(item['unitNet']).toFixed(4) : '-'}</Text>
                                <Text className='table-content-item-item'>{item['totalNet'] ? Number(item['totalNet']).toFixed(4) : '-'}</Text>
                                <Text className={`table-content-item-item ${Number(item['preTotalNet']) === 0 ? '' :(Number(item['totalNet']) - Number(item['preTotalNet']) > 0 )  ? 'num-positive-text' :'num-negative-text'}`}>{this.getDayZdf(item)}</Text>
                            </View>
                        })
                    }
                </View>
                {
                    tempDataList.length >= 5 ? <View className='bottom-more' onClick={(e) => this.gotoHistoricalNetValue()}>
                        <Text>查看更多</Text>
                        <Image src={require('@/assets/icons/arrow-right3.png')} ></Image>
                    </View> : null
                }

            </View>
        );
    }
}


export default FundDetailHistoricalNetValue;